#include("/template/common/layout/_page_layout_all.html")
#@layout()

#define css()
<link rel="stylesheet" href="#(RESOURCE_HOST)/static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
    .pdfobject-container {
        width: 50%;
        height: 100%;
        padding: 5em 0;
    }
    html,body{
        height:100%;
    }
    ul{
        padding:0px 10px;
    }
</style>
#end

#define js()
<script type="text/javascript" src="#(RESOURCE_HOST)/static/js/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="#(RESOURCE_HOST)/static/js/pdf/pdfobject.min.js"></script>
<script type="text/javascript" src="#(RESOURCE_HOST)/static/js/pdf/pdfjs/build/pdf.js"></script>
<script type="text/javascript">
    var options = {
        forcePDFJS: true,
        PDFJS_URL: "/static/js/pdf/pdfjs/web/viewer.html"
    };

    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: zTreeOnClick
        },
        view:{
            showTitle:true
        }
    };

    var fileid = -1;

    PDFObject.embed("", "#pdfviewer", options);
    function zTreeOnClick(event, treeId, treeNode) {
        PDFObject.embed(treeNode.title,"#pdfviewer",options);
        $("#update").show();
        fileid = treeNode.fileid;
        console.log(treeNode);
        console.log("fileid:" + fileid);
        //$("#fileid").val(treeNode.fileid);
    }

    function zTreeReload() {
        util.sendAjax({
            url: '#(ctxPath)/app/filingfrom/fileTree',
            notice: false,
            success: function (data) {
                $.fn.zTree.init($("#tree"), setting, data.data);
            }
        });
    }

    $(document).ready(function () {
        zTreeReload();
        $("#update").hide();
    });

    layui.use(['jquery', 'flow', 'upload', 'layer','element'], function () {
        console.log("fileid" + fileid);
        var $ = layui.$
            , upload = layui.upload
            , flow = layui.flow
            , element = layui.element
            , layer = layui.layer;

        //创建监听函数
         var xhrOnProgress=function(fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
             //使用闭包实现监听绑
            return function() {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                 //判断监听函数是否为函数
                  if (typeof xhrOnProgress.onprogress !== 'function')
                       return xhr;
                   //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                    if (xhrOnProgress.onprogress && xhr.upload) {
                          xhr.upload.onprogress = xhrOnProgress.onprogress;
                    }
                    return xhr;
             }
         }

        //tree加载
        flow.load({
            elem: '#recomment'
            ,done: function(page, next){
                var lis = [];
                $.get('#(ctxPath)/app/filingfrom/findProAssReviewByFileIdAndProjectId', function (res) {
                    layui.each(res.data, function (index, item) {
                        if (item) {
                            if (item.recomment) {
                            }
                        }
                    });
                    next(lis.join(''), page < res.pages);
                });
            }
        });
        //普通上传
        var uploadInst = upload.render({
            elem: '#filepath'
            , url: '#(ctxPath)/app/filingfrom/uploadFile'
            , auto: false
            //,multiple: true
            , bindAction: '#upload'
            , accept: 'file'
            , exts: 'doc|docx|pdf|png|jpeg|jpg'
            , data: {description: "审定报告", fileid: fileid}
            ,xhr:xhrOnProgress
            ,progress:function(value){//上传进度回调 value进度值
                element.progress('upload-progress', value+'%')//设置页面进度条
            }
            , before: function (obj) {
                $('#upload-progress').removeClass('layui-hide');
                obj.preview(function (index, file, result) {
                    $('#resText').attr('src', result);
                    $("#update").hide();
                });
            }
            , done: function (res) {
                $('#upload-progress').addClass('layui-hide');
                if (res.code > 0) {
                    var demoText = $('#resText');
                    demoText.html('<span style="color: #FF5722;">上传失败...</span> <a class="layui-btn demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }else if (res.code == 0){
                    var demoText = $('#resText');
                    zTreeReload();
                    demoText.html('<span style="color: #5FB878;">上传成功...</span> ');
                }
            }
            , error: function () {
                $('#upload-progress').addClass('layui-hide');
                //演示失败状态，并实现重传
                var demoText = $('#resText');
                demoText.html('<span style="color: #FF5722;">上传失败...</span> <a class="layui-btn demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        //普通图片上传
        var updateInst = upload.render({
            elem: '#update'
            , url: '#(ctxPath)/app/filingfrom/updateFile'
            , accept: 'file'
            , exts: 'doc|docx|pdf|png|jpeg|jpg'
            , data: {description: "审定报告", fileid: fileid}
            ,xhr:xhrOnProgress
            ,progress:function(value){//上传进度回调 value进度值
                element.progress('upload-progress1', value+'%')//设置页面进度条
            }
            ,before:function(obj){
                $('#upload-progress1').removeClass('layui-hide');
            }
            , done: function (res) {
                 $('#upload-progress1').addClass('layui-hide');
                if (res.code > 0) {
                    var demoText = $('#resText');
                    demoText.html('<span style="color: #FF5722;">更新失败...</span> <a class="layui-btn demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        updateInst.upload();
                    });
                } else if (res.code == 0) {
                    var demoText = $('#resText');
                    zTreeReload();
                    demoText.html('<span style="color: #5FB878;">更新成功...</span> ');
                }
            }
            , error: function () {
                 $('#upload-progress1').addClass('layui-hide');
                //演示失败状态，并实现重传
                var demoText = $('#resText');
                demoText.html('<span style="color: #FF5722;">更新失败...</span> <a class="layui-btn demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    updateInst.upload();
                });
            }
        });
    });
</script>
#end

#define content()
<div class="layui-fluid" style="height:100%;">
    <div class="layui-row" style="height:100%;">
        <div class="layui-col-md3 layui-col-md-offset2" style="overflow:auto;height:100%">
            <ul id="tree" class="ztree"></ul>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>上传审定（最终）报告</legend>
            </fieldset>

            <div class="layui-progress layui-hide" style="margin-bottom:10px" lay-showpercent="true" id="upload-progress" lay-filter="upload-progress" >
                <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
            </div>

            <div class="layui-progress layui-hide" style="margin-bottom:10px" lay-showpercent="true" id="upload-progress1" lay-filter="upload-progress1" >
                <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
            </div>

            <div class="layui-timeline-title layui-row layui-upload">
                <input name="filepath" id="filepath" type="file">
            </div>

            <div class="layui-timeline-title layui-row">
                <button type="button" class="layui-btn" id="upload">提交</button>
                <button type="button" class="layui-btn" id="update">更新</button>
                <div id="resText" style="margin-top: 15px"></div>
            </div>

        </div>
        <div id="pdfviewer" class="layui-col-md7" style="height:100%;"></div>
    </div>
</div>
#end